<template>
  <a-card>
    <a-form :label-col="{ style: { width: '50px' } }">
      <a-row>
        <a-col :span="6" style="padding-right: 20px">
          <a-form-item label="标题">
            <a-input v-model:value="filterState.title" />
          </a-form-item>
        </a-col>
        <a-col :span="6" style="padding-right: 20px">
          <a-form-item label="创建人" :label-col="{ style: { width: '50px' } }">
            <!-- <MySelect title="创建人" /> -->
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item
            label="是否公开"
            :label-col="{ style: { width: '100px' } }"
          >
            <a-radio-group
              v-model:value="filterState.isShow"
              button-style="solid"
            >
              <a-radio-button :value="null">全部</a-radio-button>
              <a-radio-button :value="true">公开</a-radio-button>
              <a-radio-button :value="false">不公开</a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item
            label="是否回复"
            :label-col="{ style: { width: '100px' } }"
          >
            <a-radio-group
              v-model:value="filterState.isApply"
              button-style="solid"
            >
              <a-radio-button :value="null">全部</a-radio-button>
              <a-radio-button :value="true">已回复</a-radio-button>
              <a-radio-button :value="false">未回复</a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="2">
          <a-button type="primary">筛选</a-button>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
  <MyTable :tableData="tableData" useNumber :columns="columns"></MyTable>
  <a-modal
    v-model:visible="view"
    width="50%"
    :footer="null"
    wrapClassName="card"
    @cancel="isApply = false"
  >
    <MyView :messageData="messageData" :isApply="isApply" />
  </a-modal>
</template>

<script setup lang="ts">
import { ref, onMounted, h, reactive } from "vue";
import { getApplyMessage } from "@/api/apply";
import MyTable from "@/components/CommonDai/Table.vue";
import MyView from "./components/apply/viewMessage.vue";
// import MySelect from "@/components/CommonDai/SelectSearch.vue";
import { Tag, message } from "ant-design-vue";
const messageData = ref();
const view = ref(false);
const isApply = ref(false);
onMounted(() => {
  getApplyMessage().then((res: any) => {
    tableData.value = res.list;
  });
});

/** 过滤数据功能 */
const filterState = reactive({
  title: "",
  createUser: "",
  isShow: null,
  isApply: null,
});
/** 表格数据展示 */
const tableData = ref<any[]>([]);
const columns = ref<any[]>([
  {
    title: "标题",
    dataIndex: "title",
    isShow: true,
    align: "center",
  },
  {
    title: "创建人",
    dataIndex: "createUser",
    isShow: true,
    align: "center",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    isShow: true,
    align: "center",
  },
  {
    title: "是否公开",
    dataIndex: "isShow",
    isShow: true,
    align: "center",
    customRender: ({ text }: any) => {
      return h(Tag, { color: text === true ? "green" : "red" }, () =>
        text === true ? "是" : "否"
      );
    },
  },
  {
    title: "是否回复",
    dataIndex: "isApply",
    isShow: true,
    align: "center",
    customRender: ({ text }: any) => {
      return h(Tag, { color: text === true ? "green" : "red" }, () =>
        text === true ? "已回复" : "未回复"
      );
    },
  },
  {
    title: "操作",
    dataIndex: "action",
    isShow: true,
    align: "center",
    width: 250,
    customRender: ({ record }: any) => {
      let actions = ["查看", "回复", "删除"];
      return h("span", null, [
        actions.map((action, index) => {
          if (record.isApply === true && index === 1) {
            return;
          }
          return h(
            "a",
            {
              style: {
                marginRight: "15px",
                color: index === 2 ? "#cf1322" : "",
              },
              onClick: () => {
                message.success(action);
                if (index === 2) {
                  return;
                }

                messageData.value = record;
                if (index === 1) isApply.value = true;
                view.value = true;
              },
            },
            action
          );
        }),
        // h(
        //   "a",
        //   {
        //     style: {
        //       marginRight: "15px",
        //     },
        //     onClick: () => {
        //       message.success("查看");
        //       messageData.value = record;
        //       view.value = true;
        //     },
        //   },
        //   "查看"
        // ),
        // h(
        //   "a",
        //   {
        //     style: {
        //       marginRight: "15px",
        //     },
        //     onClick: () => {
        //       message.success("回复");
        //       isApply.value = true;
        //       messageData.value = record;
        //       view.value = true;
        //     },
        //   },
        //   "回复"
        // ),
        // h(
        //   "a",
        //   {
        //     style: {
        //       color: "#cf1322",
        //     },
        //     onClick: () => {
        //       message.success("删除");
        //     },
        //   },
        //   "删除"
        // ),
      ]);
    },
  },
]);
</script>

<style scoped lang="less">
:deep(svg) {
  vertical-align: middle;
}
:deep(.ant-form-item) {
  margin-bottom: 0px;
}
</style>
<style>
.ant-modal-content {
  background-color: transparent;
  box-shadow: none;
}
</style>
